<template>
  <div class="home-page">
    <div class="top-img">预算管家</div>
    <ul class="menu">
      <li @click="toIndex">
        <i class="el-icon-s-home"></i>
        <span>我的预算</span>
      </li>
      <el-dropdown>
        <span class="el-dropdown-link">
          系统设置<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="toTemplate">模板设置</el-dropdown-item>
          <el-dropdown-item @click.native="toSystem">材料库设置</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <li class="user-msg">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{storage.getItem('user_value') && storage.getItem('user_value').name}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toLogout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
    </ul>
    <div class="e-bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: $route.meta.prePath }" v-if="$route.meta.preName">{{$route.meta.preName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.name}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <router-view />
  </div>
</template>

<script>
import {logout} from '@/utils/api';
import storage from '@/utils/storage';
import '@/styles/home.scss';
export default {
  data () {
    return {
      storage
    }
  },
  methods: {
    toIndex () {
      this.$router.push('/');
    },
    toLogout () {
      logout().then((res) => {
        if (res) {
          storage.clear();
          this.$message.success('退出成功');
          this.$router.push('/login');
        }
      })
    },
    toSystem(){
      this.$router.push('/materialDepot'); //this.$router.push('/material/index');
    },
    toTemplate () {
      this.$router.push('/template');
    }
  }
}
</script>
